import { MapTheme, Zoom, Scale } from '@antv/l7';


// 通过sence添加的地图控件就放这里
export function useControls(map, scene) {
  // 用IControlOptionItem 类型定义控件选项
  // 主题选项数组
  const themeOptions = [
    { text: '街道', value: 'mapbox://styles/mapbox/streets-v12' },
    { text: '户外', value: 'mapbox://styles/mapbox/outdoors-v12' },
    { text: '明亮', value: 'mapbox://styles/mapbox/light-v11' },
    { text: '黑暗', value: 'mapbox://styles/mapbox/dark-v11' },
    { text: '卫星', value: 'mapbox://styles/mapbox/satellite-v9' },
    { text: '卫星街道', value: 'mapbox://styles/mapbox/satellite-streets-v12' },
    { text: '导航白天', value: 'mapbox://styles/mapbox/navigation-day-v1' },
    { text: '导航夜间', value: 'mapbox://styles/mapbox/navigation-night-v1' },
  ]

  // 定义控件配置数组
  const controlDefs = [
    { type: 'zoom', ctor: Zoom, options: { position: 'rightcenter' } }, // 缩放控件
    { type: 'scale', ctor: Scale, options: { position: 'rightbottom' } }, // 比例尺控件
    { type: 'mapTheme', ctor: MapTheme, options: { options: themeOptions, popperPlacement: 'left-start', position: 'righttop' } }, // 主题切换控件
    // mapbox导航控件
    // { type: 'navigation', ctor: NavigationControl, options: { position: 'top-left' } },
  ]

  // 创建控件实例并通过scene添加控件
  const created = []
  for (const def of controlDefs) {
    try {
      const controlInstance = new def.ctor(def.options) // 创建控件实例
      scene.addControl(controlInstance) // 添加控件到场景
      created.push({ type: def.type, instance: controlInstance }) // 记录已创建的控件
    } catch (error) {
      console.warn(`Failed to create control ${def.type}:`, error)
    }
  }




  //   controls.mapTheme = new MapTheme({
  //     options: themeOptions,
  //     popperPlacement: 'left-start', // 弹出位置
  //     position: 'righttop', // 右上角
  //   })
  //   controls.zoom = new Zoom({
  //     position: 'rightcenter', // 右中间
  //   })
  //   controls.scale = new Scale({
  //     position: 'rightbottom', // 右下角
  //   })

  //   // 将控件添加到场景中
  //   for (let key in controls) {
  //     scene.addControl(controls[key])
  //   }

  function onZoomEnd() { // 定义缩放结束事件处理函数
    const zoom = map.getZoom() // 当前缩放等级
    if (zoom < 4) {
      scaleControl.instance.hide()
    } else {
      scaleControl.instance.show()
    }
  }
  // 根据缩放等级决定比例尺的显示与隐藏
  const scaleControl = created.find(c => c.type === 'scale')
  if (!scaleControl) return
  scaleControl.instance.hide() // 初始隐藏比例尺
  map.on('zoomend', onZoomEnd) // 监听缩放结束事件

  // 返回一个清理函数 组件卸载前移除控件和事件监听
  // JavaScript 闭包会保留函数创建时的词法环境，所以 remove() 可以读取和操作 created 数组。
  return function removeControls() {
    // 从scene中移除控件
    for (const c of created) {
      scene.removeControl(c.instance)
    }
    // 移除事件监听 参数：事件类型，事件处理函数
    map.off('zoomend', onZoomEnd)
  }
}


/**
 * 样式列表
 *       <option value="mapbox://styles/chanter743/clygtwp1400yx01pre5vego7p">自定义样式</option>
      <option value="mapbox://styles/mapbox/standard">标准</option>
      <option value="mapbox://styles/mapbox/streets-v12">街道</option>
      <option value="mapbox://styles/mapbox/outdoors-v12">户外</option>
      <option value="mapbox://styles/mapbox/light-v11">明亮</option>
      <option value="mapbox://styles/mapbox/dark-v11">黑暗</option>
      <option value="mapbox://styles/mapbox/satellite-v9">卫星</option>
      <option value="mapbox://styles/mapbox/satellite-streets-v12">卫星街道</option>
      <option value="mapbox://styles/mapbox/navigation-day-v1">导航白天</option>
      <option value="mapbox://styles/mapbox/navigation-night-v1">导航夜间</option>
 */